<!-- 模板 -->
<template>
    <div class="app__body"  v-if="isShowPage">
        <div class="main">
            <h1>秒杀结束</h1>
            <div class="app-carrecommand" :class="{'aui-nodata': carsList && carsList.length <= 0}">
                <div class="app-carrecommand-inner">
                    <h2 v-if="carsList && carsList.length > 0">有急用？我们为你准备了以下特价车辆</h2>
                    <div class="app-carrecommand-carlist" id="A_CarRecommand">
                        <div class="car-items">
                            <template v-for="car in carsList">
                                <div class="car-item">
                                    <div class="car-img">
                                        <img :src="aliyun + car.carPic">
                                    </div>
                                    <div class="car-info">
                                        <h2 class="aui-ellipsis-1">{{ car.carName }}</h2>
                                        <h3><i>￥</i>{{ car.dayPrice }}<i>/天</i> <em>{{ car.plateNum.substr(0, 2) }}<span>、</span>{{ car.gearboxType == '1'? '手动': '自动' }}</em></h3>
                                        <a class="app-btn app-btn--zuche" :href="host + 'view/h5/zuche/html/details.html?source='+ userSubscribeInfo.channel +'&carNo=' + car.carNo +'&channel=hcxsq'">点击租用</a>
                                    </div>   
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main__winnerlist" v-if="!noCurrent && ownPrizeInfo && carsList">
                <a href="javascript:;" @click="winnerList" class="main__winnerlist__btn">查看获奖名单 >></a>
            </div>
        </div>
    </div>
</template>


<!-- js -->
<script>
    import { DB } from '../config/db.js';
    export default{
        data(){
            return{
                aliyun: DB.aliyundomain,
                host: DB.host,
                carsList: ""
            }
        },
        computed: {
            // 说明所有城市没有当前活动，直接进入结束页面
            noCurrent(){
                return this.$route.params.noCurrent == "1";
            },
            userSubscribeInfo(){
                return this.$store.state.userSubscribeInfo
            },
            cityCode(){
                return this.$store.state.currentCityInfo.cityCode;
            },
            // 显示页面  等store获取数据之后才能
            isShowPage(){
                return this.$store.state.currentActivityInfo.cityCode? true: false 
            },
            ownPrizeInfo(){
                return this.$store.state.ownPrizeInfo;
            }
        },
        methods: {
            getData(){
                // 加载数据
                if(this.noCurrent){
                    this.$aui.loading.show({
                        type: 1
                    });

                    let storageCityCode = localStorage['hcxsq_current_city_info'] && JSON.parse(localStorage['hcxsq_current_city_info']).cityCode ?JSON.parse(localStorage['hcxsq_current_city_info']).cityCode: '310100';

                    this.$http.get(DB.ip + 'activity/car/recommend', {
                        params: {
                            city: this.$store.state.currentCityInfo.cityCode || storageCityCode
                        }
                    }).then((res) => {
                        this.$aui.loading.hide();
                        if(res.data.resCode == '000000'){
                            this.carsList = res.data.datas;
                        }else{
                            this.$aui.toast.show(res.data.resMsg)
                        }
                    }, (error) => {
                        this.$aui.loading.hide();
                        this.$aui.toast.show({
                            msg: '系统错误，错误码：' + error.status
                        });
                    });
                }else if(!this.noCurrent && this.$route.query.id){
                    return this.$http.get(DB.ip + 'activity/'+ this.$route.query.id +'/join', {
                        params: {
                            openid: this.$route.query.openid
                        }
                    }).then((res) => {
                        if(res.data.resCode == '000000'){
                            this.$store.commit('setOwnPrizeInfo', res.data.data);
                            this.carsList =res.data.data.cars;
                        }else{  
                            this.$aui.toast.show(res.data.resMsg);
                        }
                    }, (error) => {
                        this.$aui.toast.show('系统错误，错误代码：' + error.status)
                    });
                }else{
                    this.carsList = this.$store.state.ownPrizeInfo? this.$store.state.ownPrizeInfo.cars: [];
                }
            },
            initStart(){
                if(this.$store.state.ownPrizeInfo.hasWin == 0 && this.$route.params.isFirst == 1){
                    if(this.$store.state.isNew === 0 || (this.ownPrizeInfo.currentActivityId == this.userSubscribeInfo.activityId) && this.$store.state.userSubscribeInfo.bind == 1){
                        this.$store.commit('showQuanPop', true);
                    }else{
                        this.$store.commit('showAtbiPop', true);
                    }
                }
                this.getData();
            },
            winnerList(){
                this.$router.push({name:'rank', query: {id: this.$store.state.currentActivityInfo.current.id, channel: this.$store.state.userSubscribeInfo.channel, activityId: this.$store.state.userSubscribeInfo.activityId, bind: this.$store.state.userSubscribeInfo.bind, subscribe: this.$store.state.userSubscribeInfo.subscribe, unionid: this.$store.state.userSubscribeInfo.unionid, openid: this.$store.state.userSubscribeInfo.openid}});
            }
        },
        watch: {
            isShowPage(){
                 // 没有获奖，并且是第一次进入，根据判断是否是新老用户
                this.initStart();
            }
        },
        mounted(){
            this.$aui.loading.hide();

            if(this.$store.state.currentActivityInfo && this.$store.state.currentActivityInfo.cityCode){
                this.initStart();
            }
        }
    }
</script>

<!-- scss -->
<style scoped lang="scss">
    @import "../styles/common/config.scss";
    .app__body{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9;
        overflow: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch; 
        background-color: #114384;
        color: #fff;
        &:after{
            width: 100%;
            content: '';
            height: 5.0rem;
            position: absolute;
            background: url("../assets/images/pop_sign_bg.jpg") 0 no-repeat;
            background-size: 100%;
            top: 0; 
        }
    }
    .main{
        position: relative;
        z-index: 9;
        >h1{
            width: 100%;
            height: 1.4rem;
            font-size: 0.54rem;
            line-height: 1.4rem;
            text-align: center;
             background: url(path("line_shadow.png")) 50% 100% no-repeat;
            background-size: 270px 2px;
        }
    }
    .main__winnerlist{
        width: 100%;
        padding-bottom: 0.35rem;
        color: #ffca4c;
        font-size: 0.24rem;
        @include flexbox;
        @include flexCenterHori;
        .main__winnerlist__btn{
            color: #ffca4c;
            font-size: 0.26rem;
            display: block;;
            line-height: 0.5rem;
            &:active{
                color: #f4c34e;
            }
        }
    }
    .app-btn{
        position: relative;
        display: block;
        width: 100%;
        text-align: center;
        text-decoration: none;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer;
        border-width: 0;
        -webkit-appearance: none; 
        outline: 0;
        color: #fff;
        &--booking{
            padding: 0.35rem 1.0rem;
        }
        &--setting{
            margin: 0 auto;
            border-radius: 5px;
            width: 75%;
            height: 0.8rem;
            line-height: 0.8rem;
            background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f5c34c), color-stop(100%,#ff725f));
            font-size: 0.3rem;
            .aui-icon--countdown{
               font-size: 0.36rem;
            }
            &:active{
                background: #ff725f;
            }
        }
        &--zuche{
            width: 2.7rem;
            height: 0.5rem;
            border-radius: 0.25rem;
            font-size: 0.26rem;
            line-height: 0.5rem;
            margin: 0 auto;
            background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f5c34c), color-stop(100%,#ff725f));
            &:active{
                background: #ff725f;
            }
        }
    }
    .app-carrecommand{
        position: relative;
        width: 100%;
        z-index: 9;
        .app-carrecommand-inner{
            position: relative;
            padding-bottom: 0.5rem;
            transform: translateZ(0);
            >h2{
                width: 100%;
                color: #fff;
                text-align: center;
                font-size: 0.3rem;
                line-height: 1rem;
            }
            @at-root .app-carrecommand-carlist{
                overflow: hidden;
                width: 100%;
                position: relative;
                transform: translateZ(0);
                @at-root .car-items{
                    float: left;
                    width: 100%;
                    position: relative;
                    overflow: hidden;
                    padding: 0 0.4rem;
                    @at-root .car-item{
                        width: 100%;
                        background: #ffffff;
                        @include flexbox;
                        height: 1.8rem;
                        border-radius: 0 20px 0 20px;
                        overflow: hidden;
                        margin-top: 0.24rem;
                        &:first-child{
                            margin-top: 0;
                        }
                        @at-root .car-img{
                            width: 2.4rem;
                            height: 1.8rem;
                            >img{
                                display: block;
                                max-width: 100%;
                                width: 100%;
                                height: 100%;
                            }
                            border-radius: 0 0 0 20px;
                            overflow: hidden;
                        }
                        @at-root .car-info{
                            @include flexAuto;
                            padding-top: 0.1rem;
                            background: url(../assets/images/wave_lintener_bg.png) 50% 100% no-repeat; 
                            background-size: 100% auto;
                            >h2{
                                line-height: 0.5rem;
                                color: #000;
                                font-size: 0.3rem;
                                font-weight: bold;
                                text-align: center;
                                padding: 0 0.1rem;
                            }
                            >h3{
                                text-align: center;
                                color: #ff725f;
                                font-size: 0.34rem;
                                font-weight: bold;
                                line-height: 0.6rem;
                                >i{
                                    display: inline-block;
                                    font-size: 0.24rem;
                                }
                                em{
                                    color: #8f8f8f;
                                    font-size: 0.24rem;
                                }
                                >span{
                                    padding: 0 2px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
